<template>
    <div class="handle">
        <div class="h-switch">
            <a-switch v-model:checked="zHEnchecked" 
            :checked-children="t('handle.zh')" :un-checked-children="t('handle.en')"
            @change="esChange"
            /></div>
        <div class="h-switch">
            <a-switch v-model:checked="bhchecked" 
            :checked-children="t('handle.white')" :un-checked-children="t('handle.black')" 
            @change="wbChange"
            /></div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useStore } from 'vuex'
import { useI18n } from "vue-i18n";
const { t, locale} = useI18n();
const store = useStore();
const zHEnchecked = ref(false);
const bhchecked = ref(false);
onMounted(() => {
    store.state.handle.ceSwitch === 'zh' ? zHEnchecked.value = false : zHEnchecked.value = true;
    let flag = JSON.parse(store.state.handle.flag);
    if (bhchecked !== flag) {
        bhchecked.value = flag;
        wbChange()
    }
})
// 中/英切换
const esChange = () => {
    let _str = zHEnchecked.value ? 'en' : 'zh'
    locale.value = _str
    store.dispatch('Chinese_English_Switch_Actions', _str)
};
// 白/黑天换肤
const wbChange = () => {
    store.dispatch('White_Black_Switch_Actions', bhchecked.value)
    window.document.documentElement.setAttribute(
        "data-theme",
        bhchecked.value ? "dark" : "light"
    )
};
</script>

<style lang="scss" scoped>
.handle {
    width: 350px;
    height: 100%;
    display: flex;
    align-items: center;
    .h-switch {
        margin-right: 20px;
    }
}
</style>